<template>
  <div>
    <a-modal v-model:visible="visible" fullscreen :footer="false">
      <template #title>点名明细</template>
      <!-- CRUD 组件 -->
      <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm">
        <!-- 搜索区 tableSearch -->
        <template #tableSearch>
          <a-col :sm="8" :xs="24">
            <a-form-item field="uuid" label="用户ID">
              <a-input v-model="searchForm.uuid" placeholder="请输入用户ID" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :sm="8" :xs="24">
            <a-form-item field="user_keyword" label="用户信息">
              <a-input v-model="searchForm.user_keyword" placeholder="请输入用户信息" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :sm="8" :xs="24">
            <a-form-item field="community_uuid" label="团长ID">
              <a-input v-model="searchForm.community_uuid" placeholder="请输入团长ID" allow-clear />
            </a-form-item>
          </a-col>
        </template>
        <!-- Table 自定义渲染 -->
        <template #id="{ record }">
          <div style="display: flex;align-items: center;">
            <a-image :src="record?.avatar" :preview-src-list="[record?.avatar]" style="width: 48px; height: 48px; margin-right: 8px;" />
            <div>
              <div>{{ record?.nickname }}</div>
              <div>ID:{{ record?.uuid }}</div>
            </div>
          </div>
        </template>
        <template #community_info="{ record }">
          <div v-if="record.community_info" style="display: flex;align-items: center;">
            <a-image :src="record?.community_info?.avatar" :preview-src-list="[record?.community_info?.avatar]" style="width: 48px; height: 48px; margin-right: 8px;" />
            <div>
              <div>{{ record?.community_info?.nickname || '无' }}</div>
              <div>ID:{{ record?.community_info?.id }}</div>
            </div>
          </div>
          <div v-else>--</div>
        </template>
        <template #is_reward="{ record }">
          <div>{{ record?.is_reward === 1 ? '已发放' : '未发放' }}</div>
        </template>
      </sa-table>
    </a-modal>

    <!-- 编辑表单 -->
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import api from '@/api/marketing/banner'

const crudRef = ref()
const visible = ref(false)
const currentRow = ref({})

// 搜索表单
const searchForm = ref({
  room_id: '',
  community_uuid: '',
  uuid: '',
  user_keyword: '',
  sign_check: '',
})



// 打开弹框
const open = (row) => {
  currentRow.value = row
  searchForm.value.room_id = row.room_id
  searchForm.value.sign_check = row.sign_check
  crudRef.value?.refresh()
  visible.value = true
}

// SaTable 基础配置
const options = reactive({
  api: api.CallRecordDetail,
  rowSelection: { showCheckedAll: true },
  singleLine: true,
  add: {
    show: false,
   
  },
  delete: {
    show: false,
  },
})

const columns = reactive([
  { title: '用户信息', dataIndex: 'id', width:180 },
  { title: '上级信息', dataIndex: 'community_info', width: 180 },
  { title: '直播间名称', dataIndex: 'name', width:180 },
  { title: '签到标识', dataIndex: 'sign_check', width: 180 },
  { title: '第几次点名', dataIndex: 'layer', width: 180 },
  { title: '发放状态', dataIndex: 'is_reward', width: 180 },
  { title: '签到时间', dataIndex: 'created_at', width: 180 },
  { title: '操作', dataIndex: '__operation', width: 0 },
])


// 页面加载完成执行
defineExpose({ open })
</script>

<style scoped></style>
